<template>
  <div>
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkList" v-bind="$attrs" :label="groupLabel" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="item in props.labelList" :label="item" :key="item" />
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';
const props = defineProps({
  label: {
    type: String,
    default: '多选框'
  },
  labelList: {
    type: Array,
    default: ['多选框1']
  },
  modelValue: {
    type: Array,
    default: []
  }
})
const emit = defineEmits(['update:modelValue'])

const checkList = ref([])
const groupLabel = ref(props.label)
const isIndeterminate = ref(false)
const checkAll = ref(false)

watch(() => props.modelValue, (val) => {

  checkAll.value = val.length === props.labelList.length
  isIndeterminate.value = val.length > 0 && val.length < props.labelList.length

  checkList.value = val
}, {
  deep: true,
  immediate: true
})


//全选
const handleCheckAllChange = (val) => {
  checkList.value = val ? props.labelList : []
  isIndeterminate.value = false
}
//单个勾选
const handleCheckedCitiesChange = (val) => {
  const checkedCount = val.length
  checkAll.value = checkedCount === props.labelList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.labelList.length
}

watch(checkList, (val) => {
  emit('update:modelValue', val)
}, {
  deep: true
})

watchEffect(() => {

  console.log('%c [  ]-67', 'font-size:13px; background:pink; color:#bf2c9f;', checkAll.value, checkList.value)
})
</script>

<style lang="scss" scoped></style>